<template>
  <div class="rich-text-editor">
    <div class="toolbar">
      <button 
        @click="formatText('bold')" 
        :class="{ active: isBold }"
        title="加粗"
      >
        <strong>B</strong>
      </button>
      <button 
        @click="formatText('italic')" 
        :class="{ active: isItalic }"
        title="斜体"
      >
        <em>I</em>
      </button>
      <button 
        @click="formatText('underline')" 
        :class="{ active: isUnderline }"
        title="下划线"
      >
        <u>U</u>
      </button>
      <button 
        @click="insertList('insertUnorderedList')" 
        title="无序列表"
      >
        • 列表
      </button>
      <button 
        @click="insertList('insertOrderedList')" 
        title="有序列表"
      >
        1. 列表
      </button>
      <button 
        @click="formatText('removeFormat')" 
        title="清除格式"
      >
        清除
      </button>
    </div>
    <div 
      ref="editor" 
      class="editor-content"
      contenteditable="true"
      @input="onInput"
      @keyup="updateToolbarState"
      @mouseup="updateToolbarState"
    ></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'

const props = defineProps<{
  modelValue?: string
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void
}>()

const editor = ref<HTMLElement | null>(null)
const isBold = ref(false)
const isItalic = ref(false)
const isUnderline = ref(false)

// 格式化文本
const formatText = (command: string) => {
  document.execCommand(command, false)
  updateToolbarState()
  onInput()
}

// 插入列表
const insertList = (command: string) => {
  document.execCommand(command, false)
  onInput()
}

// 更新工具栏状态
const updateToolbarState = () => {
  isBold.value = document.queryCommandState('bold')
  isItalic.value = document.queryCommandState('italic')
  isUnderline.value = document.queryCommandState('underline')
}

// 处理输入事件
const onInput = () => {
  if (editor.value) {
    emit('update:modelValue', editor.value.innerHTML)
  }
}

// 监听值变化
watch(() => props.modelValue, (newValue) => {
  if (editor.value && editor.value.innerHTML !== newValue) {
    editor.value.innerHTML = newValue || ''
  }
})

// 组件挂载时初始化
onMounted(() => {
  if (editor.value) {
    editor.value.innerHTML = props.modelValue || ''
  }
})
</script>

<style scoped>
.rich-text-editor {
  border: 4px solid var(--border-color);
  border-radius: 4px;
  box-shadow: 4px 4px 0 var(--border-color);
  background-color: var(--neo-brutalist-white);
  overflow: hidden;
}

.toolbar {
  display: flex;
  border-bottom: 2px solid var(--neo-brutalist-gray);
  padding: 0.5rem;
  background-color: var(--neo-brutalist-gray);
  gap: 0.25rem;
}

.toolbar button {
  padding: 0.25rem 0.5rem;
  border: 2px solid var(--border-color);
  background-color: var(--neo-brutalist-white);
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s;
  color: var(--text-color);
}

.toolbar button:hover {
  background-color: var(--neo-brutalist-dark-gray);
  color: var(--neo-brutalist-white);
}

.toolbar button.active {
  background-color: var(--border-color);
  color: var(--neo-brutalist-white);
}

.editor-content {
  min-height: 200px;
  padding: 1rem;
  outline: none;
  font-family: 'Roboto Mono', monospace;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--neo-brutalist-white);
}

.editor-content:empty:before {
  content: '在这里输入日记内容...';
  color: #aaa;
  font-style: italic;
}
</style>